<template>
	<view class="wap">
		<view class="page-step">
			<view class="step-con">
				<view class="con-item">
					<image class="item-icon" src="@/static/img/camera-icon.png"></image>
					<text class="step-text">上传截图</text>
				</view>
				<view class="con-item">
					<image class="item-arrow" src="/static/img/arrowBlack.png" mode="widthFix"></image>
				</view>
				<view class="con-item">
					<image class="item-icon" src="@/static/img/audit-icon.png"></image>
					<text class="step-text">客服核对</text>
				</view>
				<view class="con-item">
					<image class="item-arrow" src="/static/img/arrowBlack.png" mode="widthFix"></image>
				</view>
				<view class="con-item">
					<image class="item-icon" src="@/static/img/cashback-icon.png"></image>
					<text class="step-text">返利到账</text>
				</view>
			</view>
		</view>

		<view class="container store-container" v-if="info.reason && info.status=='3'">
			<view class="row border-bottom">
				<view class="item" style="flex-shrink: 0;">
					<image src="@/static/img/jinggao.png" class="platform-icon"></image>
					<text class="step-text" style="color: #f96456;">审核未通过</text>
				</view>
			</view>
			<view class="row border-bottom marginT-10" style="padding-bottom: 20px;">
				<view class="item">
					<text class="remark-text" style="color: #f96456;">
						{{ info.reason }}
					</text>
				</view>
			</view>
		</view>

		<view class="container store-container">
			<view class="row border-bottom" style="padding-bottom: 0">
				<view class="item" style="align-items: flex-start">
					<image class="store-image" :src="info.store.image">

					</image>
					<text class="title-text">{{ info.store.name }}</text>
				</view>
			</view>
			<view class="row border-bottom" style="margin-top: 10px">
				<view class="item">
					<text class="remark-text" style="color: #ff5500;">
						{{ info.activity.rule }}
					</text>
				</view>
			</view>
			<view class="page-type">
				<view class="type-left">
					<view class="page-MT" v-if="info.activity.platform=='meituan'">美团</view>
					<view class="page-ELM" v-if="info.activity.platform=='eleme'">饿了么</view>
				</view>
				<view class="type-btn" @click="gotoWaiMai(info.activity.platform,info.store)">
					前往截图
				</view>
			</view>
			<!-- <view class="row">
        <view class="item expire-item">
          <text>上传截止：</text>
          <text class="amount">00</text>
          <text>日</text>
          <text class="amount">18</text>
          <text>时</text>
          <text class="amount">38</text>
          <text>分</text>
          <text class="amount">20</text>
          <text>秒</text>
        </view>
      </view> -->
		</view>
		<view class="container input-container">
			<view class="row header-row">
				<view class="item">
					<view class="header-icon"></view>
					<text class="title-text">上传订单单号</text>
				</view>
				<view class="item"></view>
			</view>
			<view class="row marginT-10">
				<view class="item">
					<text class="remark-text">请输入订单单号，需要与截图单号一致</text>
				</view>
			</view>
			<view class="row">
				<input class="order-input" placeholder="请填写订单号" @input="onInput" :value="waimai_order"
					name="waimai_order">
				</input>
			</view>
		</view>
		<view class="container input-container">
			<view class="row header-row">
				<view class="item">
					<view class="header-icon"></view>
					<text class="title-text">上传外卖订单截图</text>
				</view>
				<view class="item" @click="shiliImg()">
					<image src="@/static/img/screenshot-icon.png" class="screentshot-image">
					</image>
					<text class="screentshot-text">示例截图</text>
				</view>
			</view>
			<view class="row marginT-10">
				<view class="item">
					<text class="remark-text">需要看到店铺名称、实付金额、下单时间以及订单号</text>
				</view>
			</view>
			<view class="row marginT-10">
				<view class="item">
					<text class="x-red">*</text>
					<text class="step-text">美团需要看到订单已完成！</text>
				</view>
			</view>
			<view class="row">
				<view class="item">
					<text class="x-red">*</text>
					<text class="step-text">有必点要求的，需截图必点产品明细</text>
				</view>
			</view>
			<view class="row image-row">
				<view class="item add-item" v-for="(item,index) in waimai_order_image_1" :key='index'>
					<image src="@/static/img/close-ico.png" class="delete-icon" @click="deleteImg(index,'old')">
					</image>
					<image class="choose-image" :src="item" mode="aspectFill" @click="previewImage(index,'old')">
					</image>
				</view>
				<view class="item add-item" v-for="(item,index) in orderImg" :key='index'>
					<image src="@/static/img/close-ico.png" class="delete-icon" @click="deleteImg(index,'new')">
					</image>
					<image class="choose-image" :src="item" mode="aspectFill" @click="previewImage(index,'new')">
					</image>
				</view>
				<view class="item add-item" id='fileUploadBtn' @click="chooseImgs()"
					v-show="(orderImg.length+waimai_order_image.length) < 2">
					<image class="add-icon" src="@/static/img/upload-ico.png">
					</image>
					<text>最多上传2张</text>
				</view>
			</view>
		</view>
		<view class="container input-container">
			<view class="row header-row">
				<view class="item">
					<view class="header-icon"></view>
					<text class="title-text">上传评价截图</text>
					<image src="@/static/img/all-star.png" class="star-icon">
					</image>
					<image src="@/static/img/all-star.png" class="star-icon">
					</image>
					<image src="@/static/img/all-star.png" class="star-icon">
					</image>
					<image src="@/static/img/all-star.png" class="star-icon">
					</image>
					<image src="@/static/img/all-star.png" class="star-icon">
					</image>
				</view>
				<view class="item" @click="shiliImg2()">
					<image src="@/static/img/screenshot-icon.png" class="screentshot-image">
					</image>
					<text class="screentshot-text">示例截图</text>
				</view>
			</view>
			<view class="row marginT-10">
				<view class="item">
					<text class="remark-text">需要看到店铺名称、评价内容、评价时间</text>
				</view>
			</view>
			<view class="row image-row">
				<view class="item add-item" v-for="(item,index) in waimai_comment_image_1" :key='index'>
					<image src="@/static/img/close-ico.png" class="delete-icon" @click="deleteImg2(index,'old')">
					</image>
					<image class="choose-image" :src="item" mode="aspectFill" @click="previewImage2(index,'old')">
					</image>
				</view>
				<view class="item add-item" v-for="(item,index) in evaluateImg" :key='index'>
					<image src="@/static/img/close-ico.png" class="delete-icon" @click="deleteImg2(index,'new')">
					</image>
					<image class="choose-image" :src="item" mode="aspectFill" @click="previewImage2(index,'new')">
					</image>
				</view>
				<view class="item add-item" id='fileUploadBtn' @click="chooseImgs2()"
					v-show="(evaluateImg.length+waimai_comment_image.length) < 1">
					<image class="add-icon" src="@/static/img/upload-ico.png">
					</image>
					<text>最多上传1张</text>
				</view>
			</view>
		</view>

		<view class="page-btn" @click="doSubmit()">提交</view>

	</view>
</template>

<script>
	import {
		getVoucherDetails,
		voucherUpload
	} from '../../apirequest/api.js';
	import {
		baseUrl
	} from '../../apirequest/config.js'

	export default {
		data() {
			return {
				info: [],
				lock: 0,
				waimai_order: '',

				orderImg: [],
				waimai_order_image_1: [],
				waimai_order_image: [],
				evaluateImg: [],
				waimai_comment_image_1: [],
				waimai_comment_image: [],
				// 外卖订单示例截图
				orderImgShili: [],
				// 评论示例截图
				evaluateImgShili: []
			}
		},
		onLoad(o) {
			this.id = o.id || 0;
			if (!this.id) {
				uni.showToast({
					title: '参数错误',
					icon: "error"
				})
				setTimeout(function() {
					uni.navigateBack({
						delta: 0
					});
				}, 1000);
				return;
			}
			this.loadData();
		},
		onShow() {

		},
		methods: {
			onInput(e) {
				console.log(e.detail.value)
				this.waimai_order = e.detail.value;
			},
			gotoWaiMai: function(platform, store) {
				uni.showToast({
					title: '小程序暂未开放'
				})
				if (platform == 'meituan') {
					if (store.meituan_url) {
						window.location.href = store.meituan_url;
					} else {
						uni.showToast({
							title: '暂无链接地址',
							icon: "error"
						});
					}
				} else { //饿了么复制店名
					uni.setClipboardData({
						data: store.name,
						success() {
							uni.showToast({
								title: '店铺复制成功，请打开对应App下单',
								icon: "success"
							});
						}
					});
				}
			},
			//获取数据
			loadData: function() {
				getVoucherDetails({
					id: this.id
				}).then((res) => {
					if (res.code == 1) {
						this.info = res.data;
						this.waimai_order = res.data.waimai_order;

						this.waimai_order_image_1 = res.data.waimai_order_image_1;
						this.waimai_order_image = res.data.waimai_order_image;
						this.waimai_comment_image_1 = res.data.waimai_comment_image_1;
						this.waimai_comment_image = res.data.waimai_comment_image;

						this.orderImgShili = res.data.orderImgShili;
						this.evaluateImgShili = res.data.evaluateImgShili;
					} else {
						uni.showToast({
							title: res.msg,
							icon: "error"
						})
						setTimeout(function() {
							uni.navigateBack({
								delta: 0
							});
						}, 1000)
					}
				}).catch(err => {
					console.log(err)
				})
			},
			shiliImg(e) {
				var _this = this
				//所有图片
				var imgbox = _this.orderImgShili;
				if (!imgbox.length) {
					uni.showToast({
						title: '暂无图片',
						icon: "error"
					});
					return;
				}
				uni.previewImage({
					//当前显示图片
					current: imgbox[0],
					//所有图片
					urls: imgbox
				})
			},
			shiliImg2(e) {
				var _this = this
				//所有图片
				var imgbox = _this.evaluateImgShili;
				if (!imgbox.length) {
					uni.showToast({
						title: '暂无图片',
						icon: "error"
					});
					return;
				}
				uni.previewImage({
					//当前显示图片
					current: imgbox[0],
					//所有图片
					urls: imgbox
				})
			},
			// 上传外卖订单截图
			// 选择图片
			chooseImgs: function() {
				var _this = this
				uni.chooseImage({
					count: 2 - (_this.orderImg.length + _this.waimai_order_image.length),
					sizeType: ['original', 'compressed'],
					sourceType: ['album'], //从相册选择
					success: (res) => {
						console.log("tempFilePaths")
						console.log(res.tempFilePaths)
						const tempFilePaths = res.tempFilePaths
						for (var i = 0; i < tempFilePaths.length; i++) {
							_this.orderImg.push(tempFilePaths[i]);
							console.log("tempFilePaths" + tempFilePaths[i])
						}

					}
				})
			},
			//图片预览
			previewImage: function(index, type) {
				var _this = this
				//所有图片
				var imgbox = [];
				if (type == 'new') {
					imgbox = _this.orderImg;
				} else {
					imgbox = _this.waimai_order_image_1;
				}
				console.log(type)
				console.log(imgbox)
				uni.previewImage({
					//当前显示图片
					current: imgbox[index],
					//所有图片
					urls: imgbox
				})
			},
			// 删除图片
			deleteImg: function(index, type) {
				var _this = this;
				if (type == 'new') {
					_this.orderImg.splice(index, 1)
				} else {
					_this.waimai_order_image.splice(index, 1)
					_this.waimai_order_image_1.splice(index, 1)
				}
			},
			// 上传评价截图
			// 选择图片
			chooseImgs2: function() {
				var _this = this
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'], //从相册选择
					success: (res) => {
						console.log("tempFilePaths")
						console.log(res.tempFilePaths)
						const tempFilePaths = res.tempFilePaths
						for (var i = 0; i < tempFilePaths.length; i++) {
							_this.evaluateImg.push(tempFilePaths[i]);
							console.log("tempFilePaths" + tempFilePaths[i])
						}

					}
				})
			},
			//图片预览
			previewImage2: function(index, type) {
				var _this = this
				//所有图片
				var imgbox = [];
				if (type == 'new') {
					imgbox = _this.evaluateImg;
				} else {
					imgbox = _this.waimai_comment_image_1;
				}
				uni.previewImage({
					//当前显示图片
					current: imgbox[index],
					//所有图片
					urls: imgbox
				})
			},
			// 删除图片
			deleteImg2: function(index, type) {
				var _this = this
				if (type == 'new') {
					_this.evaluateImg.splice(index, 1)
				} else {
					_this.waimai_comment_image.splice(index, 1)
					_this.waimai_comment_image_1.splice(index, 1)
				}
			},
			doSubmit: function() {
				var e = this;
				if (e.lock) return;
				let adds = {
					waimai_order: e.waimai_order,
					waimai_order_image: [],
					waimai_comment_image: [],
					old_waimai_order_image: e.waimai_order_image.join(","),
					old_waimai_comment_image: e.waimai_comment_image.join(","),
					id: e.id,
				}
				if (!e.waimai_order) {
					uni.showToast({
						title: '请填写外卖订单号',
						icon: 'error'
					})
					return false;
				}
				if (!(e.orderImg.length + e.waimai_order_image.length)) {
					uni.showToast({
						title: '请上传外卖订单截图',
						icon: 'error'
					})
					return false;
				}
				/* if (!(e.evaluateImg.length+e.waimai_comment_image.length)) {
				  uni.showToast({
				    title: '请上传评价截图',
				    icon:'error'
				  })
				  return false;
				} */
				console.log(adds);
				var _submit = function(data) {
					voucherUpload(adds).then((res) => {
						if (res.code == 1) {
							uni.showToast({
								title: res.msg,
								icon: "success"
							});
							setTimeout(function() {
								uni.navigateBack({
									delta: 0
								});
							}, 1000);
						} else {
							uni.showToast({
								title: res.msg,
								icon: "error"
							});
							e.lock = 0;
						}
					}).catch(err => {
						console.log(err)
					})
				};
				let index = 0;
				let img_num = e.orderImg.length + e.evaluateImg.length
				let imgs = []
				var upload_image = function(filePath, item) {
					uni.showLoading({
						title: "正在上传图片",
						mask: !0
					}), uni.uploadFile({
						url: baseUrl + 'common/upload',
						filePath: filePath,
						name: 'file',
						header: {
							//'content-type': 'multipart/form-data',
							"token": uni.getStorageSync('token')
						},
						success: function(data) {
							console.log(data)
							uni.hideLoading({
								complete: (res) => {},
							})
							var img_res = JSON.parse(data.data)
							console.log(img_res)
							if (img_res.code == 1) {
								adds[item].push(img_res.data.url);
								imgs.push(img_res.data.url);
								index++;
								// console.log(imgs.length+'----'+img_num)
								console.log(adds)
								if (imgs.length == img_num) {
									adds['waimai_order_image'] = adds['waimai_order_image'].join(",");
									adds['waimai_comment_image'] = adds['waimai_comment_image'].join(
										",");
									console.log(adds);
									_submit(adds)
								}
							} else {
								e.lock = 0;
								uni.showToast({
									title: img_res.msg,
									icon: 'none'
								});
							}
						}
					})
				}
				if (!img_num) {
					e.lock = 1;
					adds.waimai_order_image = '';
					adds.waimai_comment_image = '';
					_submit(adds);
				} else {
					if (e.orderImg.length) {
						e.lock = 1;
						console.log(e.orderImg)
						for (var i = 0; i < e.orderImg.length; i++) {
							console.log(i)
							console.log(e.orderImg[i])
							upload_image(e.orderImg[i], 'waimai_order_image');
						}
					}
					if (e.evaluateImg.length) {
						e.lock = 1;
						console.log(e.evaluateImg)
						for (var i = 0; i < e.evaluateImg.length; i++) {
							console.log(i)
							console.log(e.evaluateImg[i])
							upload_image(e.evaluateImg[i], 'waimai_comment_image');
						}
					}
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.page-step {
		padding-top: 30rpx;
		background-image: linear-gradient(#ff8546 20%, #ffb130 30%, transparent 70%);

		.step-con {
			width: 95%;
			margin: 0 auto;
			box-sizing: border-box;
			padding: 30rpx 50rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #FFFFFF;
			border-radius: 20rpx;
			font-size: 28rpx;
			color: #666666;
			text-align: center;
			box-shadow: 0 0 20rpx -10rpx rgba(0, 0, 0, 0.2);

			.con-item {
				.item-icon {
					width: 80rpx;
					height: 80rpx;
					display: block;
					margin: 0 auto;
				}

				.item-arrow {
					width: 40rpx;
					height: 40rpx;
					opacity: 0.4;
				}
			}
		}
	}

	.page-MT {
		border: 2rpx solid #fdd900;
		background-color: #fdd900;
		padding: 4rpx 10rpx;
		border-radius: 10rpx;
		color: #333333;
		margin-right: 10rpx;
		font-size: 24rpx;
		text-align: center;
	}

	.page-ELM {
		color: #fff;
		border-color: #02b6fd;
		background-color: #02b6fd;
		padding: 4rpx 10rpx;
		border-radius: 10rpx;
		margin-right: 10rpx;
		font-size: 24rpx;
		text-align: center;
	}

	.page-type {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 40rpx;
		border-top: 2rpx solid #eeeeee;

		.type-btn {
			background-image: linear-gradient(to right, #ff8546, #ffb130);
			padding: 8rpx 40rpx;
			border-radius: 40rpx;
			color: #FFFFFF;
			font-size: 28rpx;
			text-align: center;
		}
	}

	.page-btn {
		background-image: linear-gradient(to right, #ff8546, #ffb130);
		padding: 20rpx 40rpx;
		border-radius: 20rpx;
		color: #FFFFFF;
		font-size: 30rpx;
		box-sizing: border-box;
		text-align: center;
		width: 95%;
		margin: 40rpx auto;
	}

	.marginT-10 {
		margin-top: 10px !important;
	}

	.wap {
		display: flex;
		flex-flow: column
			/* 头部区域 */
			/* 商家区域 */
			/* 输入区域 */
			/* 底部区域 */
	}

	.wap .container {
		margin: 10px 11px 0;
		display: flex;
		flex-flow: column;
		background-color: #fff;
		border-radius: 10px;
		box-shadow: 0 0 20rpx -10rpx rgba(0, 0, 0, 0.2);
	}

	.wap .container .row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 20px 20px 0;
	}

	.wap .container .row .item {
		display: flex;
		align-items: center
	}

	.wap .container .row .item .step-image {
		width: 28px;
		height: 28px
	}

	.wap .container .row .item .step-text {
		color: #333;
		font-size: 28rpx;
	}

	.wap .container .row .item .right-two-icon {
		width: 15px;
		height: 15px
	}

	.wap .container .row .item .title-text {
		color: #333;
		font-size: 32rpx;
		;
		font-weight: 700
	}

	.wap .container .row .item .remark-text {
		color: #9399a3;
		font-size: 28rpx;
	}

	.wap .container .row .item .x-red {
		color: red;
		font-size: 28rpx;
		;
		width: 19px;
		height: 9px;
		display: inline-block;
		vertical-align: top;
		text-align: center;
		line-height: 15px
	}

	.wap .head-container {
		background-color: unset
	}

	.wap .head-container .row {
		margin: unset
	}

	.wap .head-container .row .item .right-two-icon {
		margin-left: 23px
	}

	.wap .store-container .row {
		padding-bottom: 9px
	}

	.wap .store-container .row .item .store-image {
		width: 60px;
		height: 60px;
		border-radius: 3px;
		margin-right: 9px;
		flex-shrink: 0
	}

	.wap .store-container .row .item .platform-icon {
		width: 23px;
		height: 23px;
		margin-right: 3px
	}

	.wap .store-container .row .item .step-text {
		margin-right: 3px
	}

	.wap .store-container .row .expire-item {
		font-size: 28rpx;
		;
		font-weight: 700
	}

	.wap .store-container .row .expire-item .amount {
		font-size: 30rpx;
		;
		color: #eb2622;
		margin: 0 2px
	}

	.wap .input-container {
		padding-bottom: 20px
	}

	.wap .input-container .row .item .screentshot-image {
		width: 20px;
		height: 20px;
		margin-right: 3px
	}

	.wap .input-container .row .item .screentshot-text {
		color: #06c476;
		font-size: 28rpx;
	}

	.wap .input-container .row .item .star-icon {
		width: 15px;
		height: 15px;
		margin-left: 4px
	}

	.wap .input-container .row .order-input {
		padding: 9px 11px;
		width: 100%;
		background: #f8f9f9;
		border-radius: 3px;
		border: 1px solid #e9eaec;
		font-size: 28rpx;
	}

	.wap .input-container .row .add-item {
		width: 105px;
		height: 105px;
		color: #bec1c7;
		font-size: 24rpx;
		justify-content: center;
		flex-flow: column;
		background-color: #f8f9f9;
		border-radius: 7px;
		border: 1px solid #e9eaec;
		position: relative
	}

	.wap .input-container .row .add-item .add-icon {
		width: 33px;
		height: 33px;
		margin-bottom: 4px
	}

	.wap .input-container .row .add-item .delete-icon {
		position: absolute;
		top: -7px;
		right: -7px;
		width: 19px;
		height: 19px
	}

	.wap .input-container .row .add-item .choose-image {
		width: 100%;
		height: 100%;
		border-radius: 7px
	}

	.wap .input-container .image-row {
		justify-content: flex-start
	}

	.wap .input-container .image-row .item {
		margin-right: 9px
	}

	.wap .foot-container {
		background-color: unset;
		margin-left: 0;
		margin-right: 0
	}

	.wap .foot-container .row {
		margin: 0
	}

	.wap .foot-container .row .submit-icon {
		width: 100%
	}

	.overflow-hidden {
		width: auto;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1
			/* 这里设置需要显示几行文本 */
		;
	}
</style>